<template>
	<view class="detail-page">
		<view class="nav-bar">
			<view class="nav-back" @click="goBack">
				<wd-icon name="arrow-left" size="20px" color="#ffffff"></wd-icon>
			</view>
			<!-- <text class="nav-title">我的积分</text> -->
		</view>
		<!-- 商品图片 -->
		<view class="product-image-section">
				<!-- 商品信息 -->
			<view class="product-info-section">
				<view class="product-title">{{ productInfo.title || '' }}</view>
				<view class="product-subtitle">{{ productInfo.englishTitle || '' }}</view>
				<view class="product-description" style="margin-top: 30rpx;">
					{{ productInfo.childTitle || '' }}
				</view>
			</view>
			<image 
				:src="productInfo.cover || '/static/img/bg1.png'" 
				class="product-image" 
				mode="aspectFit"
			/>
		</view>
		
		<!-- 规格选择 -->
		<view class="option-section">
			<view class="option-title">规格</view>
			<view class="option-buttons">
				<view 
					v-for="(size, index) in sizeOptions" 
					:key="index"
					class="option-btn"
					:class="{ 'active': selectedSize === index }"
					@click="selectSize(index)"
				>
					{{ size }}
				</view>
			</view>
		</view>
		
		<!-- 温度选择 -->
		<view class="option-section">
			<view class="option-title">温度</view>
			<view class="option-buttons">
				<view 
					v-for="(temp, index) in tempOptions" 
					:key="index"
					class="option-btn"
					:class="{ 'active': selectedTemp === index }"
					@click="selectTemp(index)"
				>
					{{ temp }}
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<!-- 数量控制 -->
			<view class="quantity-control">
				<view class="control-btn minus" @click="noCart">
					<wd-icon name="decrease" size="16px" :color="productInfo?.choseNum>0?'#333':'#999'"></wd-icon>
				</view>
				<text class="quantity">{{ productInfo.choseNum }}</text>
				<view class="control-btn plus" @click="okCart">
					<wd-icon name="add" size="16px" color="#333" />
				</view>
				<!-- <wd-input-number v-model="quantity" @change="increaseQuantity($event,item,index)" /> -->
			</view>
			
			<!-- 加入购物车按钮 -->
			<view class="add-to-cart-btn" @click="addToCart">
				<text class="btn-text">加入购物车</text>
			</view>
		</view>
	</view>
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	// 响应式数据
	const quantity = ref(1)
	const selectedSize = ref(0)
	const selectedTemp = ref(0) 
	const loadActive = ref(false);
	const id = ref(null);
	const name = ref(null);
	
	// 商品信息
	const productInfo = ref({})
	
	// 规格选项
	const sizeOptions = ref([])
	
	// 温度选项
	const tempOptions = ref([])
	const selTempOptions = ref(null)
	
	
	/**
	 * 页面加载时获取商品信息
	 */
	const getDetail =  async ()=>{
		loadActive.value = true;
		const res = await uni.api.goodsDetail({businessId:id.value});
		if (res.code === 0) {
			productInfo.value = res.data;
			sizeOptions.value = [res.data?.spe];
			tempOptions.value = res.data?.unit?.split('/');
			selTempOptions.value = tempOptions.value[0];
			selectTemp(0);
		}
		loadActive.value = false;
	}
	
	const getDetail2 =  async ()=>{
		const res = await uni.api.goodsDetail({businessId:id.value,goodsDetail:selTempOptions.value});
		if (res.code === 0) {
			productInfo.value = res.data;
			sizeOptions.value = [res.data?.spe];
			tempOptions.value = res.data?.unit?.split('/');
		}
	}
	/**
	 * 选择温度
	 * @param {number} index - 温度索引
	 */
	const selectTemp = (index) => {
		selectedTemp.value = index;
		selTempOptions.value = tempOptions.value[index];
		getDetail2();
	}
	
	
	onLoad( async (options) => {
		if (options.id) {
			id.value = options.id
			getDetail();
		}
	})
	

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	/**
	 * 选择规格
	 * @param {number} index - 规格索引
	 */
	const selectSize = (index) => {
		selectedSize.value = index;
	}
	
	/**
	 * 减少数量
	 */
	const decreaseQuantity = () => {
		if (quantity.value > 1) {
			quantity.value--
		}
	}
	
	/**
	 * 增加数量
	 */
	const increaseQuantity = () => {
		quantity.value++
	}
	// 减购物车
	const noCart = () => {
		if (productInfo.value?.choseNum > 0) {
			changeCart(1);
		}
	}
	// 加购物车
	const okCart = () => {
		changeCart(0);
	}
	const changeCart = async (type) => {
		// 显示加载状态
		uni.showLoading({
			title: '提交中...'
		});
		const cartItem = {
			godosId: productInfo.value.id,
			goodsDetail: selTempOptions.value,
			optType: type, //0=添加；1=减少；2=删除；
			venueId: productInfo.value.venueId,
		}
		const res = await uni.api.optCarInfo(cartItem);
		uni.hideLoading();
		if(res.code == 0){
			uni.showToast({
				title: `操作成功`,
				icon: 'none'
			});
			// 发送事件通知index页面刷新数据
			uni.$emit('refreshWaterBarData');
			getDetail2()
		} else {
			uni.showToast({
				title: res.message || '操作失败',
				icon: 'none'
			});
		}
	}
	/**
	 * 加入购物车
	 */
	const addToCart = async () => {
			// 显示加载状态
			uni.showLoading({
				title: '提交中...'
			});
			const cartItem = {
				godosId: productInfo.value.id,
				goodsDetail: selTempOptions.value,
				optType: 0, //0=添加；1=减少；2=删除；
				venueId: productInfo.value.venueId,
			}
			const res = await uni.api.optCarInfo(cartItem);
			
			uni.hideLoading();
			
			if(res.code == 0){
				uni.showToast({
					title: `操作成功`,
					icon: 'none'
				});
				// 发送事件通知index页面刷新数据
				uni.$emit('refreshWaterBarData');
				// 延迟返回，让用户看到成功提示
				setTimeout(() => {
					uni.navigateBack();
				}, 100);
			} else {
				uni.showToast({
					title: res.message || '操作失败',
					icon: 'none'
				});
			}
	}
</script>

<style scoped lang="scss">
.nav-bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: calc(var(--status-bar-height) + 122rpx);
		width: 100%;
		display: flex;
		align-items: flex-end;
		padding: 0 32rpx 16rpx;
		z-index: 10;
		box-sizing: border-box;
		
		.nav-back {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background: rgba(0, 0, 0, 0.1);
			backdrop-filter: blur(10px);
		}
		
		.nav-title {
			position: absolute;
			left: 50%;
			bottom: 16rpx;
			transform: translateX(-50%);
			color: #ffffff;
			font-size: 36rpx;
			font-weight: 500;
		}
	}
	.detail-page {
		background: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	
	/* 商品图片区域 */
	.product-image-section {
		background: #fff;
		padding: 40rpx;
		text-align: center;
		padding-top: calc(var(--status-bar-height) + 130rpx);
		
		.product-image {
			width: 400rpx;
			height: 400rpx;
			border-radius: 16rpx;
		}
	}
	
	/* 商品信息区域 */
	.product-info-section {
		background: #fff;
		padding:0 32rpx;
		// margin-top: 16rpx;
		
		.product-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.product-subtitle {
			font-size: 28rpx;
			color: #909399;
			margin-bottom: 24rpx;
		}
		
		.product-description {
			font-size: 28rpx;
			color: #909399;
			line-height: 1.6;
		}
	}
	
	/* 选项区域 */
	.option-section {
		background: #fff;
		padding: 32rpx;
		margin-top: 16rpx;
		
		.option-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 24rpx;
		}
		
		.option-buttons {
			display: flex;
			gap: 16rpx;
			
			.option-btn {
				padding: 16rpx 32rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #666;
				text-align: center;
				min-width: 120rpx;
				
				&.active {
					background: #888888;
					color: #fff;
				}
			}
		}
	}
	
	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 32rpx;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		gap: 24rpx;
		z-index: 999;
		
		.quantity-control {
			display: flex;
			align-items: center;
			gap: 24rpx;
			
			.control-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				&.minus {
					border-color: #ddd;
				}
				
				&.plus {
					border-color: #ddd;
				}
			}
			
			.quantity {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				min-width: 40rpx;
				text-align: center;
			}
		}
		
		.add-to-cart-btn {
			flex: 1;
			background: #333;
			border-radius: 50rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.btn-text {
				color: #fff;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>